<script type="text/javascript">
    let params_data = [];
    let layerIndex;
    let dataTable;
    let layuiform;
    layui.use(['index', 'treeSelect', 'form', 'table'], function () {
        var treeSelect = layui.treeSelect;
        let table = layui.table;
        layuiform = layui.form;
        dataTable = table.render({
            elem: '#params_table',
            title: '参数列表',
            data: params_data,
            cols: [
                [{
                    field: 'key',
                    title: '键名',
                }, {
                    field: 'value',
                    title: '键值',
                }, {
                    fixed: 'right',
                    align: 'center',
                    toolbar: '#options'
                }]
            ]
        });
        table.on('tool(dataTable)', function (obj) {
            let data = obj.data;
            let layEvent = obj.event;
            switch (layEvent) {
                case 'edit':
                    editParam(data);
                    break;
                case 'del':
                    let index = search(data.key, 'edit');
                    params_data.splice(index, 1);
                    reloadParams();
                    break;
            }
        });
        treeSelect.render({
            elem: '#parent_id',
            data: "{{route('admin.auth.module.tree')}}",
            placeholder: '请选择',
            success: function (data) {
                let parent_id = '{{$module->parent_id}}';
                if (parent_id != null && parent_id != '')
                    treeSelect.checkNode('parent_id', parent_id);
            }
        });
        layuiform.on('submit(paramForm)', function (data) {
            saveParam();
            return false;
        });
    });
    $(function () {
        let param = '{{$module->params}}';
        param.split(';').forEach(function (item) {
            if (item !== '') {
                let it = item.split(':');
                params_data.push({
                    key: it[0],
                    value: it[1]
                });
            }
        });

    })

    function initLayer() {
        layerIndex = layer.open({
            type: 1,
            title: '参数信息',
            area: '500px',
            content: `
                <form class="layui-form">
                    <div style="margin:10px">
                        <div class="layui-form-item">
                            <label class="layui-form-label" for="key">键名</label>
                            <div class="layui-input-block">
                                <input class="layui-input" lay-verify="required" id="key">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label" for="value">键值</label>
                            <div class="layui-input-block">
                                <input class="layui-input" lay-verify="required" id="value">
                            </div>
                        </div>
                        <input type="hidden" id="param_type">
                        <input type="hidden" id="old_key">
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="paramForm">保存</button>
                            <a href="javascript:;" class="layui-btn layui-btn-primary" onclick="closeLayer()">关闭</a>
                        </div>
                    </div>
                </form>
            `
        });
    }

    function createParam() {
        this.initLayer();
        $("#param_type").val('create');
    }

    function editParam(data) {
        this.initLayer();
        $("#param_type").val('edit');
        $("#key").val(data.key);
        $("#old_key").val(data.key);
        $("#value").val(data.value);
    }

    function closeLayer() {
        layer.close(layerIndex);
    }

    function saveParam() {
        let param_type = $("#param_type").val();
        if (param_type === 'create') {
            if (search($('#key').val(), 'create')) {
                params_data.push({
                    key: $('#key').val(),
                    value: $('#value').val()
                })
                reloadParams();
                closeLayer();
            } else {
                layer.msg('有重复的键名', {
                    icon: 5
                });
            }
        }
        if ((param_type === 'edit')) {
            let index = search($('#old_key').val(), 'edit');
            params_data[index].key = $('#key').val();
            params_data[index].value = $('#value').val();
            reloadParams();
            closeLayer();
        }
    }

    function reloadParams() {
        let params = "";
        for (let i in params_data) {
            params = params + params_data[i].key + ":" + params_data[i].value + ";";
        }
        $("#params").val(params);
        dataTable.reload({
            data: params_data
        });
    }

    function search(key, type) {
        for (let i in params_data) {
            if (params_data[i].key === key) {
                if (type === 'create') {
                    return false
                } else if (type === 'edit') {
                    return i;
                }
            }
        }
        return true;
    }

</script>
